<script setup>
import { ref } from 'vue'
import { Check, Plus, Upload } from '@element-plus/icons-vue'

const formData = ref({
  loginName: 'zmy',
  name: 'pioneer',
  phone: '18438041284',
  email: '941053749@qq.com',
  oldPassword: '123456',
  newPassword: 'z12415',
  rePassword: 'z12415'
})
const ruleFormRef = ref()
const imageUrl = ref('/src/assets/avatar.jpg')
const onSubmit = () => {
  console.log('submit!')
}
const validateNewPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('Please input the password'))
  } else {
    if (formData.value.newPassword !== '') {
      if (!ruleFormRef.value) return
      ruleFormRef.value.validateField('checkPass')
    }
    callback()
  }
}
const validateRePassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('Please input the password again'))
  } else if (value !== formData.value.rePassword) {
    callback(new Error("Two inputs don't match!"))
  } else {
    callback()
  }
}
const rules = ref({
  name: [{ required: true, message: '请输入用户昵称', trigger: 'blur' },
  { pattern: /^\S{2,10}$/, message: '长度在 2 到 10 个非空字符之间', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    {
      type: 'email',
      message: '请输入正确的邮箱地址',
      trigger: ['blur', 'change']
    }
  ],
  phone: [{
    pattern: /^((13[0-9])|(14[5,7])|(15[0-3,5-9])|(17[0,3,5-8])|(18[0-9])|166|198|199|(147))\d{8}$/,
    required: true, message: '请输入有效的手机号', trigger: 'blur'
  }],
  oldPassword: [{ required: true, message: '请输入原密码', trigger: 'blur' },
  { min: 6, max: 15, message: '密码长度在6到15个字符', trigger: 'blur' }],
  newPassword: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 15, message: '密码长度在6到15个字符', trigger: 'blur' },
    { validator: validateNewPassword, trigger: 'blur' }
  ],
  rePassword: [{ required: true, message: '请确认新密码', trigger: 'blur' },
  { min: 6, max: 15, message: '密码长度在6到15个字符', trigger: 'blur' },
  { validator: validateRePassword, trigger: 'blur' }]
})
</script>
<template>
  <PageContainer title="基本信息">
    <div class="main" style="position: relative;">
      <div class="avatar" style="margin-left: 140px;">
        <el-upload class="avatar-uploader" :show-file-list="false" :on-change="selectFile" :auto-upload="false"
          style="margin-left: 20px;margin-bottom: 12px;">
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon">
            <Plus />
          </el-icon>
        </el-upload>
        <el-button type="primary">
          <el-icon>
            <Plus />
          </el-icon>&nbsp;选择头像</el-button>
        <el-button type="success"><el-icon>
            <Upload />
          </el-icon>&nbsp;选择头像
        </el-button>
      </div>
      <el-form ref="ruleFormRef" :model="formData" class="demo-form-inline" style="display: flex;" :rules="rules">
        <!-- 登录名称 -->
        <div class="info" style="position: absolute;right: 0%;top: 0%;">
          <div class="left">
            <el-form-item label="登录名称">
              <el-input v-model="formData.loginName" placeholder="请输入登录名称" clearable disabled />
            </el-form-item>
            <!-- 用户电话 -->
            <el-form-item label="用户电话" prop="phone">
              <el-input v-model="formData.phone" placeholder="请输入用户电话" clearable>
              </el-input>
            </el-form-item>

            <!-- 原密码-->
            <el-form-item label="旧的密码" prop="oldPassword">
              <el-input v-model="formData.oldPassword" placeholder="请输入旧的密码" clearable>
              </el-input>
            </el-form-item>
            <!-- 新密码-->
            <el-form-item label="新的密码" prop="newPassword">
              <el-input v-model="formData.newPassword" placeholder="请输入新的密码" clearable>
              </el-input>
            </el-form-item>
            <!-- 确定密码-->
            <el-form-item label="确定密码" prop="rePassword">
              <el-input v-model="formData.rePassword" placeholder="请再次输入密码" clearable>
              </el-input>
            </el-form-item>
            <!-- 编辑个人信息 -->
            <el-form-item>
              <el-button type="primary" @click="onSubmit"><el-icon>
                  <Check />
                </el-icon>&nbsp;&nbsp;&nbsp;提交修改</el-button>
            </el-form-item>
          </div>
          <div class="right" style="margin-left: 5%;">
            <!--用户昵称  -->
            <el-form-item label="用户昵称" prop="name">
              <el-input v-model="formData.name" placeholder="请输入用户昵称" clearable>
              </el-input>
            </el-form-item>
            <!-- 用户邮箱 -->
            <el-form-item label="用户邮箱" prop="email">
              <el-input v-model="formData.email" placeholder="请输入用户邮箱" clearable>
              </el-input>
            </el-form-item>
          </div>
        </div>
      </el-form>
      <!-- 工作经历 -->
      <div class="experience" style="width: 550px; position: absolute;top: 110%;left:0%">
        <h3 style="font-weight: 700;">工作经历</h3>
        <el-carousel :interval="5000" arrow="always">
          <el-carousel-item v-for="item in 4" :key="item">
            <h3 text="2xl" justify="center"></h3>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>

  </PageContainer>
</template>

<style lang="scss" scoped>
.demo-form-inline {
  .el-input {
    --el-input-width: 220px;
  }
}

.info {
  display: flex;
  margin-left: 6%;
  padding: 50px;
  width: 900px;
  height: 650px;
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  .el-form-item {
    margin-bottom: 60px;
    margin-right: 100px;
  }
}

.avatar-uploader {
  :deep() {
    .avatar {
      width: 200px;
      height: 200px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 278px;
      height: 278px;
      text-align: center;
    }
  }
}

//轮番图
.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
  background-image: url('/src/assets/login.png');
  background-size: cover;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
  background-image: url('/src/assets/people.jpg');
  background-size: cover;
}
</style>